
<template>
    <div>
        <el-scrollbar class="app-container-scroll-bar">
         <el-row style="margin-top:10px;border-bottom:1px solid #e2e7eb;">
          <el-col style="font-size:20px;margin-bottom:10px;" :span="24">
           <span style="margin-left:25px;">服务授权</span>
           </el-col>
            </el-row>
            
            <div v-loading="loading">
            <h3 v-if="this.validity" style="width:80%;text-align: right;margin:20px auto;color: #979797;">服务已授权：服务有效期至&nbsp;{{time}} </h3>
            <h3 v-else style="width:80%;text-align: right;margin:20px auto;color: #979797;">服务未授权</h3>
            <!-- 协议展示 -->
            <div class="warp">     
             <!-- 机器码 -->
            <div class="jq_code" style="margin:25px 0">
             <el-row>
                 <el-col :span="1">
                     <span style="color: #979797;font-size:12px">机器码</span>
                 </el-col>
                 <el-col :span="1">
                     <span style="display: inline;">
                   <el-button type="text" class="tag-read" :data-clipboard-text="mechine" @click="copy">复制机器码</el-button>
                     </span>
                 </el-col>
             </el-row>
              
               <!-- <el-input type="textarea" :rows="5" v-model="mechine"></el-input> -->
               <el-card  shadow="never">
                   <p>{{mechine}}</p>
               </el-card>
            </div>
            <!-- end -->
           
           <!-- 授权码 -->
            <div style="margin:18px 0">
                <span style="color: #979797;font-size:12px">授权码</span>
                 <!-- <el-button type="text" >更新授权码</el-button> -->
                <el-input v-model="code" type="textarea" :rows="5" ></el-input>
            </div>
            <!-- end -->
              <div style="margin-left:10px">
                  <span >
                   <el-checkbox :checked="checked" v-model="checked"></el-checkbox>
                  </span>
                  <span>
                   <el-button type="text" @click="handleXY">同意授权协议</el-button>
                  </span>
              </div>
               
             <div style=" text-align:right;" v-if="!loading">
                  <el-button  v-if="this.copyCode == '' && this.needUpdate"  :disabled="!checked" style="margin:20px 0; float:right;" type="primary" 
                                @click="handleSQ">认证授权</el-button>

                  <el-button  v-if="this.copyCode && this.needUpdate " :disabled="!checked" style="margin:20px 0; float:right;" type="primary" 
                                @click="handleSQ">更新授权</el-button>
                                
                 </div>
              </div> 
            </div>
        </el-scrollbar>

           	<!--弹窗内容 start-->
		<div class="app-output-window">
			<licenseTitle ref="licenseTitle" :licenseText="licenseText"></licenseTitle>
		</div>
		<!--弹窗内容 end-->
    </div>
</template>
<script>
import licenseTitle from '@/view/pages/xitong/fuwu/licenseTitle.vue';
import Clipboard from 'clipboard';
import { getLicenseInfo, save } from '@/service/swagger/licenseController.js'
export default {
    components: {
        licenseTitle
    },
    data() {
        return {
            loading: false,
            checked: false,
            updateBtn: false,
            time: "",//剩余时间
            data: {},
            mechine: "",
            code: "",
            licenseText: "",
            needUpdate: "",
            copyCode: '',
            validity:''
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        // fmtDate() {
        //     let date = new Date()
        //     let y = date.getFullYear();
        //     let m = date.getMonth() + 1;
        //     let d = date.getDate()
        //     let nowDate = y + "-" + m + "-" + d;
        // },
        initData() {
            this.loading = true
            getLicenseInfo({}).then(ret => {
                if (!ret.code) {
                    this.loading = false
                    this.data = ret.data
                    this.code = ret.data.license
                    this.copyCode = ret.data.license
                    this.mechine = ret.data.macheine
                    this.needUpdate = ret.data.needUpdate
                    this.licenseText = ret.data.serviceStatementOfUnderstanding
                    this.time = (ret.data.validity).substring(0, 10)
                    this.validity = ret.data.validity
                    if (this.code) {
                        this.checked = true
                    } else {
                        this.checked = false
                    }
                    // this.timeFn(ret.data.validity)
                }

            })
        },
        //认证授权
        handleSQ() {
            let params = {
                license: this.code
            }
            save(params).then(ret => {
                if (ret.code === 0) {
                    this.$message({
                        message: '授权成功!',
                        type: 'success'
                    })
                    this.initData()
                } else {
                    this.initData()
                }
            })
        },
        // 复制机器码
        copy() {
            var clipboard = new Clipboard('.tag-read')
            clipboard.on('success', e => {
                this.$message({
                    message: '复制成功!',
                    type: 'success'
                })
                console.log('复制成功')
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                this.$message({
                    message: '复制失败!',
                    type: 'error'
                })
                console.log('复制失败')
                clipboard.destroy()
            })
        },
        handleXY() {
            this.$refs.licenseTitle.open()
        },
        // timeFn(d1) {
        //     var dateBegin = new Date(d1.replace(/-/g, "/"));
        //     var dateEnd = new Date();//获取当前时间
        //     var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
        //     var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
        //     var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
        //     var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
        //     //计算相差分钟数
        //     var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
        //     var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
        //     //计算相差秒数
        //     var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
        //     var seconds = Math.round(leave3 / 1000)

        //     console.log(" 相差 " + (0 - dayDiff - 1) + "天 " + (0 - hours) + "小时 " + (0 - minutes) + " 分钟" + (0 - seconds) + " 秒")
        //     if (0 - (dayDiff - 1) < 30) {
        //         this.isShow = true
        //     } else {
        //         this.isShow = false
        //     }
        // }
    }
}
</script>
<style scoped>
.warp {
  width: 80%;
  margin: 0 auto;
}
.warp .jq_code p {
  display: block;
  word-break: break-all;
  word-wrap: break-word;
  font-size: inherit;
  color: #606266;
  font-size: 13.5px;
}
</style>


